<template>
  <view
    class="navbar"
    :class="{ 'navbar-border': props.border, 'navbar-fixed': props.fixed }"
    :style="{ gap: `${props.gap ?? 6}px`, backgroundColor: backgroundColor }"
  >
    <view class="start" :style="props.startStyle">
      <slot name="start">
        <view class="back" v-if="showBack" @click="handleBack">
          <image class="image" mode="heightFix" src="@/assets/icon-back.png" />
        </view>
      </slot>
    </view>
    <view class="middle" :style="props.middleStyle">
      <slot></slot>
    </view>
    <view class="end" :style="props.endStyle">
      <slot name="end"></slot>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

const props = defineProps<{
  gap?: number;
  border?: boolean;
  fixed?: boolean;
  startStyle?: string;
  middleStyle?: string;
  endStyle?: string;
  customBack?: boolean; //自定义返回 如果开启，将禁用默认的返回处理，可通过监听@back自行实现//
  // backMode?: 'auto' | 'never' | 'always'; // auto(默认)当页面栈>1时显示返回按钮；never不显示返回按钮；always始终显示返回按钮
  backMode?: 'always' | 'never'; // always(默认) never不显示返回按钮；always始终显示返回按钮
  noStatusBar?: boolean; //忽略状态栏占位
  backgroundColor?: string; //背景颜色
}>();

const emits = defineEmits<{
  (event: 'back'): void;
}>();

const showBack = computed(() => {
  if (props.backMode == 'never') {
    return false;
  }
  if (props.backMode == 'always') {
    return true;
  }
  // const pages = getCurrentPages();
  // const curPage = pages[pages.length - 1];
  // const prevPage = pages[pages.length - 2];
  // if (!prevPage) {
  //   return false;
  // }
  // // TODO 首页判断
  // if (prevPage.route && prevPage.route.indexOf('/TODO') != -1) {
  //   return false;
  // }
  return true;
});

const handleBack = () => {
  if (!props.customBack) {
    // #ifdef H5
    if (route.query.share == 'true') {
      goHome();
      return;
    }
    let canNavBack = getCurrentPages();
    if (canNavBack && canNavBack.length > 1) {
      uni.navigateBack({});
    } else {
      history.back();
    }
    // #endif
    // #ifndef H5
    uni.navigateBack({
      delta: 1
    });
    // #endif
  }
  emits('back');
};
// 回到首页
function goHome() {
  uni.switchTab({
    url: '/pages/tabs/home'
  });
}
</script>

<style lang="scss" scoped>
.navbar {
  width: 100%;
  height: calc(var(--navbar-height) + var(--status-bar-height));
  box-sizing: border-box;

  display: flex;
  align-items: center;
  gap: 9px;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 0 10px;
  padding-top: var(--status-bar-height);

  &-fixed {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    background-color: #fff;
    // padding-top: calc(var(--navbar-height) + var(--status-bar-height));
  }

  &-border {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }

  .start {
    flex: 1;
    flex-shrink: 0;
  }

  .middle {
    flex: 2;
    text-align: center;
    font-size: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-color);
  }

  .end {
    flex: 1;
    flex-shrink: 0;
  }

  .back {
    min-width: 30px;
    min-height: 30px;
    display: flex;
    align-items: center;

    .image {
      height: 15px;
    }
  }
}
</style>
